<template>
  <view class="home-container">
    <!-- 顶部黄色背景 -->
    <view class="header-bg"></view>

    <!-- 页面内容 -->
    <scroll-view class="scroll-view" :scroll-y="true">
      <view class="content-wrapper">
        <!-- 顶部导航 -->
        <view class="top-nav">
          <uv-tabs
            :list="topNavList"
            :current="currentTopNav"
            @change="handleTopNavChange"
            lineWidth="20"
            lineColor="#333"
            :activeStyle="{
              color: '#333',
              fontWeight: 'bold',
              transform: 'scale(1.1)',
            }"
            :inactiveStyle="{
              color: '#666',
              transform: 'scale(1)',
            }"
          ></uv-tabs>
        </view>

        <!-- 搜索框 -->
        <view class="search-bar">
          <uv-search
            placeholder="输入达人昵称试试"
            v-model="keyword"
            :showAction="false"
            shape="round"
            bgColor="#fff"
          ></uv-search>
        </view>

        <!-- 轮播图 -->
        <view class="swiper-container">
          <uv-swiper
            :list="swiperList"
            keyName="image"
            :height="100"
            :radius="10"
          ></uv-swiper>
        </view>

        <!-- 筛选栏 -->
        <view class="filter-bar">
          <view class="filter-tabs">
            <uv-tabs
              :list="filterList"
              :current="currentFilter"
              @change="handleFilterChange"
              :scrollable="true"
              :activeStyle="{
                color: '#333',
                fontWeight: 'bold',
              }"
            ></uv-tabs>
          </view>
          <view class="city-selector">
            <text>长沙市</text>
            <uv-icon name="arrow-down-fill" size="10" color="#666"></uv-icon>
          </view>
        </view>

        <!-- 达人列表 -->
        <companion-list></companion-list>
      </view>
    </scroll-view>
    <CustomTabBar></CustomTabBar>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import CustomTabBar from '@/components/custom-tab-bar/index.vue';

// 顶部导航
const topNavList = ref([{ name: "关注" }, { name: "发现" }, { name: "排行" }]);
const currentTopNav = ref(1); // 默认选中“发现”

const handleTopNavChange = (item: any) => {
  currentTopNav.value = item.index;
};

// 搜索
const keyword = ref("");

// 轮播图
const swiperList = ref([
  { image: "/static/images/banner1.jpg" },
  { image: "/static/images/banner2.jpg" },
]);

// 筛选栏
const filterList = ref([
  { name: "推荐" },
  { name: "休闲娱乐" },
  { name: "旅行游玩" },
  { name: "运动户外" },
  { name: "新晋达人" },
]);
const currentFilter = ref(0);

const handleFilterChange = (item: any) => {
  currentFilter.value = item.index;
};

</script>

<style lang="scss" scoped>
.home-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px; // 背景高度，可调整
  background-color: #ffde58; // 主题黄色
  z-index: 1;
}

.scroll-view {
  position: relative;
  height: 100%;
  z-index: 2;
}

.content-wrapper {
  padding: 0 15px;
}

.top-nav {
  // H5 和 App 端的顶部导航栏高度不同，需要做适配
  /* #ifdef H5 */
  padding-top: 10px;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: 40px; // App 端状态栏高度
  /* #endif */
}

.search-bar {
  margin-top: 15px;
}

.swiper-container {
  margin-top: 15px;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.filter-tabs {
  flex: 1;
}

.city-selector {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: #f3f4f6;
  border-radius: 15px;
  font-size: 13px;
  color: #666;
  margin-left: 10px;

  text {
    margin-right: 2px;
  }
}

</style>
